<template>
  <div>
    <a-drawer
      v-model:open="modalOpen"
      title="卡券详情"
      width="80%"
      placement="right"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-card title="卡券信息">
          <a-descriptions title="" :column="{ xxl: 5 }">
            <a-descriptions-item label="卡券编号">{{
              details.couponCode
            }}</a-descriptions-item>
            <a-descriptions-item label="卡券名称">{{
              details.name
            }}</a-descriptions-item>
            <a-descriptions-item label="卡券类别">{{
              couponCategoryArr[details.couponCategory - 1]
            }}</a-descriptions-item>
            <a-descriptions-item label="发放群体">{{
              groupTypeNames
            }}</a-descriptions-item>
            <a-descriptions-item label="抵扣方式"
              >{{ details.type == 1 ? "满减" : "折扣" }}
              <span v-if="details.type == 1"
                >满{{ details.minAmount }}减{{ details.amount }}</span
              >
              <span v-else>{{ details.amount }} <span v-if="details.amount">折</span> </span>
            </a-descriptions-item>
            <a-descriptions-item label="叠加使用">{{
              details.overlayUse == 0 ? "不可叠加" : "可叠加"
            }}</a-descriptions-item>
            <a-descriptions-item label="总发数量">{{
              details.maxNum == 0 ? "无限制" : details.maxNum
            }}</a-descriptions-item>
            <a-descriptions-item label="有效时长"
              >{{ details.validDay }}天</a-descriptions-item
            >
            <a-descriptions-item label="已发数量">{{
              details.grantedNum
            }}</a-descriptions-item>
            <a-descriptions-item label="创建时间">{{
              details.createdTime
            }}</a-descriptions-item>
            <a-descriptions-item label="使用规则" :span="3">{{
              details.applicable
            }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card title="发放信息">
          <a-descriptions title="" :column="{ xxl: 5 }">
            <a-descriptions-item label="卡券来源">{{
              details.source == 1
                ? "普通"
                : details.source == 2
                ? "会员"
                : "成长值"
            }}</a-descriptions-item>
            <a-descriptions-item label="发放方式">{{
              details.releaseMode == 1
                ? "自动发放"
                : details.releaseMode == 2
                ? "手动发放"
                : "活动领取"
            }}</a-descriptions-item>
            <a-descriptions-item label="用户账户">{{
              details.username
            }}</a-descriptions-item>
            <a-descriptions-item label="核销码">{{
              details.checkCode
            }}</a-descriptions-item>
            <a-descriptions-item label="发放时间"
              >{{ details.createdTime }}
            </a-descriptions-item>
            <a-descriptions-item label="到期时间">{{
              details.endTime
            }}</a-descriptions-item>
            <a-descriptions-item label="卡券状态">{{
              details.isUse == 1
                ? "已使用"
                : "未使用"
            }}</a-descriptions-item>
            <a-descriptions-item label="使用时间">{{
              details.useTime
            }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-space>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { queryCouponReceived } from "@/api/market";
const modalOpen = ref(false);
const couponCategoryArr = ref(["购物券", "鉴定券", "养护券", "找货券"]);
const groupTypeArr = ref([
  {
    id: 0,
    name: "全部",
  },
  {
    id: 1,
    name: "新用户",
  },
  {
    id: 2,
    name: "老用户",
  },
  {
    id: 3,
    name: "会员用户",
  },
]);
const open = (id) => {
  modalOpen.value = true;
  getQueryCouponConfig(id);
};
const details = ref({});
const groupTypeNames = ref("");
const getQueryCouponConfig = async (id) => {
  const data = await queryCouponReceived({ id });
  details.value = data.data;
  console.log(data.data.groupType);
  // groupTypeNames.value =
  //   data.data.groupType.join(",") == 0
  //     ? "全部"
  //     : groupTypeArr.value
  //         .map((v) => {
  //           if (data.data.groupType.includes(v.id)) {
  //             return v.name;
  //           }
  //         })
  //         .filter((item) => item != undefined)
  //         .join("/");
};
// 获取发放群体
defineExpose({ open, modalOpen });
</script>

<style lang="less">
.table-item-layout {
  display: flex;
  align-items: center;
  padding: 24px 0;
  box-sizing: border-box;
  .table-item:last-child {
    border-right: 0px solid #ffffff;
  }
  .table-item {
    width: 20%;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 38px;
    box-sizing: border-box;
    border-right: 1px solid #e8ecf0;
    color: #2b3453;
    font-size: 14px;
    .table-flex {
      display: flex;
      align-items: center;
    }
  }
}

.title-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 16px;
    color: #000000;
    font-weight: 600;
  }
}

.steps-item {
  display: flex;
  align-items: flex-start;
  .left {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    .round {
      width: 20px;
      height: 20px;
      background: #262e47;
      border-radius: 50%;
    }

    .line {
      width: 2px;
      height: 53px;
      background: #262e47;
    }
  }

  .steps-title {
    color: #2b3453;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .steps-content {
    display: flex;
    align-items: center;
    color: #2b3453;
    font-size: 12px;
    .steps-block {
      margin-right: 55px;

      text {
        color: #1990ff;
        cursor: pointer;
      }
    }
  }
}
</style>
